<!--
 * @Author: OBKoro1
 * @Date: 2022-03-07 10:29:45
 * @LastEditors: OBKoro1
 * @LastEditTime: 2022-10-17 10:14:29
 * @FilePath: \onemodeSWJ\src\views\paramPlanManage\roughnessDataManage\mainStreamSectionCJ.vue
 * @Description: 
 * 
 * Copyright (c) 2022 by 用户/公司名, All Rights Reserved. 
-->
<template>
  <!-- 断面糙率 -->
  <div v-if="props.selectRiverData.type === 'Z'">
    <el-row>
      <el-col
        v-for="item in roughnessData"
        :key="item.posstr"
        :span="24"
        style="margin-bottom: 10px"
      >
        <h1 style="text-align: center">{{ item.siteName }}</h1>

        <el-row type="flex">
          <el-col
            v-for="(ele, e) in item.yangtzeRoughnessSegmenteds"
            :key="e"
            :span="4"
            style="padding: 5px"
          >
            <el-card
              class="roughness-data-card"
              :body-style="{ padding: 0, height: '83%' }"
              shadow="hover"
            >
              <template #header>
                <div class="card-header" style="text-align: center">
                  <span>{{ ele.segmentedSiteName }}</span>
                </div>
              </template>

              <el-table
                :data="ele.yangtzeRoughnessTraffics"
                border
                stripe
                :max-height="235"
                @cell-dblclick="
                  (row, column, cell, event) =>
                    onDblclick(
                      item.siteName,
                      ele.segmentedSiteName,
                      event,
                      column
                    )
                "
                @cell-mouse-leave="
                  (row, column, cell, event) =>
                    onMouseleave(item.siteName, ele.segmentedSiteName, column)
                "
              >
                <el-table-column label="流量" align="center">
                  <template #default="scope">
                    <div>
                      <el-input
                        v-if="
                          roughnessEditableData[item.siteName][
                            ele.segmentedSiteName
                          ][scope.$index]
                        "
                        v-model="
                          roughnessEditableData[item.siteName][
                            ele.segmentedSiteName
                          ][scope.$index].traffic
                        "
                        style="margin: -5px 0; text-align: center"
                        type="number"
                      />
                      <div :row-index="scope.$index" v-else>
                        {{ scope.row.traffic }}
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="糙率" align="center">
                  <template #default="scope">
                    <div>
                      <el-input
                        v-if="
                          roughnessEditableData[item.siteName][
                            ele.segmentedSiteName
                          ][scope.$index]
                        "
                        v-model="
                          roughnessEditableData[item.siteName][
                            ele.segmentedSiteName
                          ][scope.$index].roughness
                        "
                        style="margin: -5px 0; text-align: center"
                        type="number"
                      />
                      <div :row-index="scope.$index" v-else>
                        {{ scope.row.roughness }}
                      </div>
                    </div>
                  </template>
                </el-table-column>

                <el-table-column
                  v-if="props.isEditComponent"
                  label="操作"
                  align="center"
                  width="60"
                >
                  <template #default="scope">
                    <el-button
                      style="padding: 0"
                      type="danger"
                      size="small"
                      text
                      @click.prevent="
                        deleteRoughnessData(
                          item.siteName,
                          ele.segmentedSiteName,
                          scope.$index,
                          'table'
                        )
                      "
                    >
                      <MinusOutlined />
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-button
                v-if="props.isEditComponent"
                style="width: 100%; position: absolute; bottom: 0px"
                text
                @click="
                  addRoughnessData(
                    item.siteName,
                    ele.segmentedSiteName,
                    ele.segmentedId
                  )
                "
              >
                <PlusOutlined />
              </el-button>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  provide,
  watch,
  inject,
  reactive,
  toRefs,
  onMounted,
} from "vue";
import {
  MinusOutlined,
  PlusOutlined,
  CloseOutlined,
  PlusCircleOutlined,
} from "@ant-design/icons-vue";
import { ElMessage } from "element-plus";

import { sectionNameVerify } from "@/request/api";

export default defineComponent({
  components: {
    MinusOutlined,
    PlusOutlined,
    CloseOutlined,
    PlusCircleOutlined,
  },
  props: {
    // 组件内数据是否可修改
    isEditComponent: {
      type: Boolean,
      default: () => false,
    },
    // 所选河道数据
    selectRiverData: {
      type: Object,
      default: () => {},
    },
  },
  setup(props) {
    const state = reactive({
      // 河道糙率查询条件
      searchInfo: {
        reservoir: "三峡库区",
        selectPlan: "默认方案",
        createComment: "",
      },
      // 河道糙率方案列表数据
      roughnessDataList: [],
      // 河道糙率数据
      roughnessData: [],
      // 河道糙率表格编辑参数
      roughnessEditableData: {},

      // 单条河道糙率
      roughnessInputData: "",
    });

    // 监听树状图所选河道变化
    watch(
      () => props.selectRiverData,
      (value) => {
        getMatData();
      },
      { deep: true }
    );

    // 所有河道糙率数据
    const steamData = inject("steamData");

    // 长江糙率删除trafficId数组
    const cjDelArr: any = inject("cjDelArr");

    onMounted(() => {});

    /**
     * @description: 根据参数获取数据
     * @param {*} siteName
     * @param {*} posstr
     * @return {*}
     */
    function getRoughnessData(siteName, posstr) {
      return state.roughnessData
        .find((item) => item.siteName === siteName)
        .yangtzeRoughnessSegmenteds.find(
          (item) => item.segmentedSiteName === posstr
        ).yangtzeRoughnessTraffics;
    }

    /**
     * @description: 获取河道糙率数据
     * @param {*}
     * @return {*}
     */
    function getMatData() {
      const selectRiverData = props.selectRiverData;

      if (selectRiverData.type === "Z") {
        state.roughnessData = steamData[selectRiverData.key];

        // 循环最外层大站点范围
        state.roughnessData.forEach((item) => {
          state.roughnessEditableData[item.siteName] = {};
          // 循环大站点范围内的相邻站范围
          item.yangtzeRoughnessSegmenteds.forEach((ele) => {
            state.roughnessEditableData[item.siteName][ele.segmentedSiteName] =
              {};
          });
        });
      }
    }

    /**
     * @description: 河道糙率表格数据/断面数据删除
     * @param siteName 站点区域
     * @param posstr 断面名称
     * @param index 编辑行在原数组中的index
     * @return {*}
     */
    function deleteRoughnessData(siteName, posstr, index) {
      const deleteDataObj = getRoughnessData(siteName, posstr).splice(index, 1);

      cjDelArr.push(deleteDataObj[0].trafficId);
    }

    /**
     * @description: 河道糙率表格新增
     * @param siteName 站点区域
     * @param posstr 断面名称
     * @return {*}
     */
    function addRoughnessData(siteName, posstr, segmentedId) {
      getRoughnessData(siteName, posstr).push({
        roughness: "0",
        traffic: "0",
        trafficId: "0",
        segmentedId,
      });
    }

    /**
     * @description: 双击单元格后将当前行数据储存到准备编辑的数据中
     * @param siteName 站点区域
     * @param posstr 所选的断面
     * @param event 双击的单元格dom元素
     * @param column 双击的单元格在表格中的属性
     * @return {*}
     */
    function onDblclick(siteName, posstr, event, column) {
      if (column.label != "操作") {
        // 查找当前双击行index
        const rowIndex = event.target.getAttribute("row-index");

        // 将原数据赋值到编辑参数中
        state.roughnessEditableData[siteName][posstr][rowIndex] =
          getRoughnessData(siteName, posstr)[rowIndex];
      }
    }

    /**
     * @description: 移开鼠标后将储存的编辑数据赋值回去
     * @param siteName 站点区域
     * @param posstr 当前断面
     * @param column 当前单元格在表格中的属性
     * @return {*}
     */
    function onMouseleave(siteName, posstr, column) {
      if (column.label != "操作") {
        // 循环站点下的每一个双击后新增的编辑数据
        for (const sectionKeyIndex in state.roughnessEditableData[siteName][
          posstr
        ]) {
          // 根据循环出的index直接将编辑后的数据覆盖到原数据中
          getRoughnessData(siteName, posstr)[sectionKeyIndex] =
            state.roughnessEditableData[siteName][posstr][sectionKeyIndex];

          // 根据修改后的流量值将原数据进行从小到大的排序
          getRoughnessData(siteName, posstr).sort(
            (a, b) => a.traffic - b.traffic
          );
        }

        // 循环结束后将编辑数据置空
        state.roughnessEditableData[siteName][posstr] = {};
      }
    }

    return {
      ...toRefs(state),

      props,

      getMatData,
      deleteRoughnessData,
      addRoughnessData,

      onDblclick,
      onMouseleave,
    };
  },
});
</script>

<style scoped lang="less">
.sedFormInput {
  margin-bottom: 20px;
  .form-box {
    display: flex;
  }
  .el-input {
    width: 100px;
    margin: 0 4px 8px 0;
  }
}

.section-del-btn {
  display: none;
}
.el-card.is-hover-shadow:hover:hover .section-del-btn {
  display: block;

  position: absolute;
  right: 10px;
  top: 15px;
}
</style>
